<!--
 * @Author: qiaoxin
 * @Date: 2024-04-10 16:02:27
 * @LastEditors: zll
 * @LastEditTime: 2024-09-19 17:30:36
 * @Description: 
 * @FilePath: \erp-app\src\pages\pm\taskPerson\component\card.vue
-->
<template>
  <view class="card" @click="toDetail">
    <view class="main flex items-stretch">
      <view class="flex-1">
        <!-- <view class="title_row flex left flex-1">
          <view class="title">{{ _D.taskCode }}</view>
        </view> -->
        <wd-row :gutter="15">
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex" v-if="_D.petitionName">
              <view class="col">
                <text class="label">项目名称：</text>
                <text class="text">{{ _D.petitionName || '' }}</text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">任务编码：</text>
                <text class="text">{{ _D.taskCode || '' }}</text>
              </view>
            </view>
          </wd-col>
          <!-- <view class="row flex">
          <view class="col">
            <text class="label">任务编码：</text>
            <text class="text">{{ _D.projectCode || '' }}</text>
          </view>
        </view> -->
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">任务名称：</text>
                <text class="text">{{ _D.projectName || '' }}</text>
              </view>
            </view>
          </wd-col>
          <!-- <view class="row flex">
          <view class="col">
            <text class="label">日期：</text>
            <text class="text">{{ formatByDayjs(_D.taskDate) }}</text>
          </view>
        </view> -->
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">需求产品：</text>
                <text class="text">{{ _D.invName }}</text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">产品规格：</text>
                <text class="text">{{ _D.invStd }}</text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">任务负责人：</text>
                <text class="text">{{ _D.technologyHeadName }}</text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">预计完成日期：</text>
                <text class="text">{{ formatByDayjs(_D.userTime) }}</text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex" v-if="_D.rdFlag != null">
              <view class="col">
                <text class="label">评审状态：</text>
                <text v-if="_D.rdFlag == '1'" class="result-tag">通过</text>
                <text v-if="_D.rdFlag == '0'" class="result-tag" style="background-color: #f50">
                  不通过
                </text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex" v-if="_D.rdFlag != null">
              <view class="col">
                <text class="label">评审结论：</text>
                <text class="text">{{ _D.requirements }}</text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">创建人：</text>
                <text class="text">{{ _D.createName }}</text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">创建时间：</text>
                <text class="text">{{ formatByDayjs(_D.createTime) }}</text>
              </view>
            </view>
          </wd-col>
        </wd-row>
      </view>
    </view>
    <view
      class="footer flex"
      v-if="
        _D.taskAllStatus != 2 &&
        (_D.checkColor == 1 ||
          _D.reviewColor == 1 ||
          _D.assignColor == 1 ||
          (checkPremiss('erp_rdTaskUserChange_view') && (_D.taskUser || _D.technologyHeadName)))
      "
    >
      <view class="row flex" @tap.stop.prevent>
        <view class="col">
          <!-- <text class="label" style="font-size: 30rpx">申请人：{{ _D.userName }}</text> -->
          <wd-tag
            v-if="_D.checkColor == 1"
            type="primary"
            style="padding: 8rpx 10rpx; margin-right: 10rpx; font-size: 24rpx; border-radius: 8rpx"
            @click="toDetail"
          >
            待审核
          </wd-tag>
          <wd-tag
            v-if="_D.reviewColor == 1"
            type="warning"
            style="padding: 8rpx 10rpx; margin-right: 10rpx; font-size: 24rpx; border-radius: 8rpx"
            @click="toDetail"
          >
            待评审
          </wd-tag>
          <wd-tag
            v-if="_D.assignColor == 1"
            type="danger"
            style="padding: 8rpx 10rpx; margin-right: 10rpx; font-size: 24rpx; border-radius: 8rpx"
            @click="toDetail"
          >
            待指派人员
          </wd-tag>
          <wd-tag
            v-if="
              checkPremiss('erp_rdTaskUserChange_view') &&
              _D.taskAllStatus != 2 &&
              (_D.taskUser || _D.technologyHeadName)
            "
            @tap.stop="toApplyPerson"
            type="primary"
            style="padding: 8rpx 10rpx; margin-right: 10rpx; font-size: 24rpx; border-radius: 8rpx"
          >
            任务人员变更
          </wd-tag>
          <!-- <text class="text highlight"></text> -->
        </view>
      </view>
      <!-- <view class="action">
        <view class="btn primary" @click.stop="toDetail(_D)">
          <text>查看</text>
        </view>
      </view> -->
    </view>
  </view>
</template>

<script lang="ts" setup>
// import { getCurrentInstance } from 'vue';
import { formatByDayjs } from '@/utils/util';
import { useUserStore } from '@/stores/user';
const userStore: any = useUserStore();
const { appContext } = getCurrentInstance();
const props = defineProps({
  _D: {
    type: Object,
    default: () => {},
  },
  showFooter: {
    type: Boolean,
    default: false,
  },
  from: {
    type: String,
    default: '',
  },
});
let is_big = ref(false);
const checkPremiss = (k) => {
  return userStore.userInfos.authBtnList.some((v: string) => v === k);
};
const toDetail = () => {
  const p = {
    id: props._D.id,
    taskCode: props._D.taskCode,
    demandCode: props._D.demandCode,
  };

  uni.navigateTo({
    url: `/pages/pm/taskPerson/form?id=${p.id}&isReview=${props._D.reviewColor}&isCheck=${props._D.checkColor}&isAssign=${props._D.assignColor}`,
  });
};
const toApplyPerson = () => {
  const p = {
    id: props._D.id,
    taskCode: props._D.taskCode,
    demandCode: props._D.demandCode,
  };

  uni.navigateTo({
    url: `/pages/pm/personApply/detail?id=${p.id}&isReview=${props._D.reviewColor}&isCheck=${props._D.checkColor}&isAssign=${props._D.assignColor}&addType=add`,
  });
  return false;
};
onLoad(() => {
  const wWidth = uni.getSystemInfoSync().windowWidth;
  is_big.value = wWidth > 578 ? true : false;
});
onShow(() => {
  uni.onWindowResize((e) => {
    // console.log(e.size.windowWidth);

    if (e?.size.windowWidth > 578) {
      // uni.setStorageSync('is_big', '1');
      is_big.value = true;
    } else {
      // uni.removeStorageSync('is_big');
      is_big.value = false;
    }
  });
});
</script>

<style scoped lang="scss">
.card {
  padding: 24rpx 20rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  background: #fff;
  border-radius: 15rpx;
  /* box-shadow: 0 15rpx 10rpx 0 #f7f7f7; */
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.main {
  .title_row {
    align-items: flex-start;
    overflow: hidden;
  }

  .title {
    flex: 1;
    margin-bottom: 32rpx;
    overflow: hidden;
    font-size: 32rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .row {
    align-items: flex-start;
    line-height: 1.5;
    font-size: 28rpx;
    // padding: 10rpx 0;
    margin-bottom: 6rpx;
    .result-tag {
      padding: 6rpx 14rpx;
      margin: 2rpx 0;
      font-size: 24rpx;
      color: white;
      font-size: 24rpx;
      background-color: #87d068;
      border-radius: 4rpx;
    }
    .col {
      display: flex;
      flex: 1;
      align-items: center;
      min-width: 45%;
      line-height: 28rpx;

      ~ .col {
        margin-left: 12rpx;
      }

      .label {
        flex-shrink: 0;
        width: 200rpx;
        font-size: 28rpx;
        padding: 12rpx 0;
        color: #888;
      }

      .text {
        font-size: 28rpx;
        color: #000;
        word-break: break-all;
        word-wrap: break-word;
      }
    }
  }

  .left {
    overflow: hidden;
  }

  .right {
    flex-shrink: 0;
    margin-left: 12rpx;
    font-size: 24rpx;
    color: #666;
  }
}

.footer {
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding-top: 24rpx;
  font-size: 24rpx;
  color: #666;

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1rpx;
    content: '';
    background-color: #f3f3f3;
  }

  .unit ~ .unit {
    margin-left: 18rpx;
  }

  .action {
    position: relative;
    right: -24rpx;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: 6rpx 24rpx;
    font-size: 26rpx;

    .btn {
      padding: 6rpx 12rpx;

      ~ .btn {
        margin-left: 16rpx;
      }
    }

    .primary {
      color: #007aff;
    }

    .danger {
      color: #f56c6c;
    }
  }
  /* // .action {
        // 	padding: 6rpx 0 6rpx;
        // 	font-size: 26rpx;
        // 	color: #007aff;
        // } */
}
</style>
